<template>
	<view class="wrapper">
		<!-- 用户 -->
		<!-- 	<view class="user_info">
			<view class="user_info_left">
				<u-avatar :src="'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'" size="60"></u-avatar>
				<view class="user_name">
					<u--text :text="name" size="18" lineHeight="28" color='#fff' bold></u--text>
					<u-tag style="margin: 5px 20px 5px 0;" :text="'item'" size="mini" color="#fff"
						borderColor="transparent" bgColor="#11d183"></u-tag>
				</view>
			</view>
			<view class="user_info_right" @click="gotoDetails">
				<u--text text="查看详情" size="14" lineHeight="28" color='#fff'></u--text>
			</view>
		</view> -->
		<view class="header_avatar">
			<view class="image">
				<view
					style="border: 3px solid #fff;border-radius: 50%; overflow: hidden; width: 100rpx; height: 100rpx; ">
					<image :src="form.avatar ? form.avatar : '../../static/login/logo.png' " @tap="avatarDetail"
						style="width: 100%; height: 100%; border: none;"></image>
				</view>
				<view class="name">
					<view class="nickName">
						{{data.name ? data.name : '暂无获取'}}
					</view>
					<view class="phone">
						{{ hidePhoneNumber(form.phone) }}
					</view>
					<view class="completeInfoState" v-if="form.completeInfoState == 0">
						<u-tag text="未认证" size="mini" type="error" shape="circle"></u-tag>
					</view>
					<view class="completeInfoState" v-if="form.completeInfoState == 1">
						<u-tag text="认证中" size="mini" type="warning" shape="circle"></u-tag>
					</view>
					<view class="completeInfoState" v-if="form.completeInfoState == 2">
						<u-tag text="已认证" size="mini" type="success" shape="circle"></u-tag>
					</view>
				</view>
				<!-- 		<view class="buttom" @click="showPopupQuit = true">
					<view>
						退出登录
					</view>
				</view> -->
				<view class="setting" @click="tosetting">
					<u-icon label="设置" name="setting" labelPos="bottom" labelColor="#fff" color="#fff"
						size="28"></u-icon>
				</view>
			</view>
		</view>

		<!-- 成绩 -->
		<view class="result_wrapper">
			<view class="list_wrapper">
				<view class="item" v-for="(item,index) in weekMonthList" :key="index">
					<u-tag @click="weekMonth=item" :text="item" size="large" style="width:100%" type="info"
						:color="weekMonth===item?'#fff':'#fb8e65'" :bgColor="weekMonth===item?'#f05a23':'#fff'"
						borderColor='transparent'></u-tag>
				</view>
			</view>
			<view class="result_wrp_info" @click="toWaterDetails">
			<!-- <view class="result_wrp_info"> -->
				<view class="result_wrp_info_text">
					<u--text :text="weekMonth===weekMonthList[0]?'本周签单流水':'本月签单流水'" size="14" lineHeight="28"
						align="center"></u--text>
					<u--text :text="weekMonth===weekMonthList[0]?weekCashflowTotal || 0+'元':monthCashflowTotal || 0+'元'"
						size="14" lineHeight="28" color='#e01f1f' align="center"></u--text>
				</view>
				<view class="result_wrp_info_text">
					<u--text :text="weekMonth===weekMonthList[0]?'本周分润流水':'本月分润流水'" size="14" lineHeight="28"
						align="center"></u--text>
					<u--text
						:text="(weekMonth===weekMonthList[0] ? weekAchievTotal || 0 + '元' : monthAchievTotal || 0 +'元')"
						size="14" lineHeight="28" color='#e01f1f' align="center"></u--text>
				</view>
			</view>
			<view style="padding: 20rpx 0; ">
				<u--image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%"
					height="220rpx"></u--image>
			</view>
			<view v-for="(itemModule, indexModule) of moduleList" :key="indexModule">
				<u--text :text="itemModule.title" size="18" lineHeight="38" bold></u--text>
				<view class="operate_body">
					<u-grid :border="false">
						<u-grid-item v-for="(todoListItem,todoListIndex) in itemModule.itemChildren" :key="todoListIndex"
							@click="clickitem(todoListItem)" style="margin-top: 20rpx;">
							<u-badge  max="99" :value="badgeTotal" :offset="[-5,36]" v-if="todoListIndex === 2" :absolute="true" style="z-index: 999"></u-badge>
							<u-badge  max="99" :value="badgeSublet" :offset="[-5,36]" v-if="todoListItem.id === 3" :absolute="true" style="z-index: 999"></u-badge>
							<u-icon :name="todoListItem.name || ''" :size="40" :color="todoListItem.color"></u-icon>
							<text class="grid-text">{{todoListItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getAchievement,
		quitLogin,
		homeListPage,
		getUserInfoAuth,
		getSublet,
		getUnreadNum
	} from '@/api/my/index.js';
	import {
		agentgetConfirm
	}from '@/api/home/index.js'
	export default {
		data() {
			return {
				form: {},
				name: '',
				data: {},
				weekMonthList: ['本周战绩', '月战绩'],
				weekMonth: '月战绩',
				token: uni.getStorageSync('token'),
				weekAchievTotal: '',
				weekCashflowTotal: '',
				monthAchievTotal: '',
				monthCashflowTotal: '',
				pageNum:1,
				current:3,
				badgeTotal:0,
				badgeSublet:0,
				moduleList: [{
						title: "签约管理",
						itemChildren: [{
								name: '../../static/operate/addlease.png',
								title: '录入租约',
								url: '/pages/home/addhouse/optioncommunity/optioncommunity',
								id: 1
							},
							{
								name: '../../static/operate/allLease.png',
								title: '全部租约',
								url: '/pages/my/lease/index',
								id: 0
							}, {
								name: 'file-text-fill',
								color: '#bb6d1c',
								title: '待房东确认',
								url: './toBeConfirmed',
								id: 2
							},
						]
					},
					{
						title: "转租管理",
						itemChildren: [{
							name: '../../static/operate/sub_lease.png',
							title: '全部转租',
							url: '/pages/my/subLease',
							id: 3
						}, ],
					},
					{
						title: "排行榜",
						itemChildren: [{
							name: '../../static/operate/paihangbang.png',
							title: '成交排行榜',
							url: '/pages/home/tidings/tidings',
							id: 4
						}, ],
					}
				]
			}
		},
		created() {
			this.getInfo()
			this.getUserName()
			this.getAchieve()
			this.getList()
			this.getSubletList()
		},
		onShow() {
			this.getList()
			this.getSubletList()
		},
		onBackPress(e) {
			//backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
			if (e.from === 'backbutton') {
				uni.switchTab({
					url: '/pages/home/home'
				})
				return true
			}

		},
		methods: {
			tosetting() {
				uni.navigateTo({
					url: '/pages/my/setting/setting'
				})
			},
			avatarDetail() {
				const imageUrl = uni.getStorageSync('avatar')
				uni.previewImage({
					urls: [imageUrl],
					current: 0,
				});
			},
			hidePhoneNumber(phone) {
				if (phone) {
					return phone.substr(0, 3) + '****' + phone.substr(7);
				} else {
					return '暂无数据'
				}

			},
			clickitem(todoListItem) {
				uni.navigateTo({
					url: todoListItem.url
				})
			},
			// 个人信息详情页
			async getInfo() {
				const res = await getUserInfo()
				if (res.data.code == 200) {
					this.form = res.data.data
					uni.setStorageSync('avatar', res.data.data.avatar)
				} else {
					uni.reLaunch({
						url: '/pages/login/login',
					})
				}
			},
			async getUserName() {
				const res = await getUserInfoAuth()
				if (res.data.code == 200) {
					this.data = res.data.data || {}
				}
			},

			// 周战绩和月战绩
			async getAchieve() {
				const res = await getAchievement()
				if (res.data.code == 200) {
					let data = res.data.data
					this.weekAchievTotal = data.weekAchievTotal
					this.weekCashflowTotal = data.weekCashflowTotal
					this.monthAchievTotal = data.monthAchievTotal
					this.monthCashflowTotal = data.monthCashflowTotal
				}
			},
			//房东待确认角标总数
			async getList() {
				//3,房屋转让申請已同意
				const res1 = await getUnreadNum(1);
				if (res1.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res1.data.msg
				})
				//4,房屋转让申请已拒绝
				const res2 = await getUnreadNum(2);
				if (res1.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res2.data.msg
				})
				this.badgeTotal = res1.data.data.count +  res2.data.data.count ;
				
			},
			//全部转租角标总数
			async getSubletList(){
				//3,房屋转让申請已同意 
				const res1 = await getUnreadNum(3);
				if (res1.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res1.data.msg
				})
				//4,房屋转让申请已拒绝
				const res2 = await getUnreadNum(4);
				if (res1.data.code != 200) return this.$refs.uToast.show({
					type: "error",
					message: res2.data.msg
				})
				this.badgeSublet = res1.data.data.count +  res2.data.data.count ;
			},
			toWaterDetails(){
				uni.navigateTo({
					url:'./waterDetails'
				})
			}
		},
	}
</script>
<style lang="scss">
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.wrapper {
		padding-top: 100rpx;
		min-height: 60vh;
		background: linear-gradient(to bottom, #f56e3e 0%, #fff 100%);

		.user_info {
			display: flex;
			justify-content: space-between;
			padding: 40rpx;

			.user_info_left {
				display: flex;
				justify-content: center;
				align-items: center;

				.user_name {
					padding-left: 20rpx;
				}
			}

		}

		/deep/ .u-tag--square {
			border-radius: 0;
			justify-content: center;
		}

		.header_avatar {
			@include flexBetween;
			padding: 30rpx;
			box-sizing: border-box;

			.image {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				width: 100%;

				image {
					border: 2px solid black;
				}

				.name {
					margin-left: 20rpx;
					display: flex;
					flex-wrap: wrap;
					width: 55%;
					margin-right: 30rpx;

					.nickName {
						@include textOverflow;
						font-size: 32rpx;
						width: 100%;
					}

					.phone {
						margin-top: 5rpx;
						padding: 0 10rpx;
						border-radius: 30rpx;
						background-color: #eff3f5;
						font-size: 26rpx;
						display: flex;
						align-items: center;
					}

					.completeInfoState {
						margin-left: 20rpx;
					}

				}

				.setting {
					margin-left: auto;
				}

			}
		}

		.result_wrapper {
			padding: 20rpx;

			.list_wrapper {
				display: flex;

				.item {
					width: 50%;
				}
			}

			.result_wrp_info {
				display: flex;
				padding: 40rpx;
				background-color: #fff;
				border-top: 1px solid #eee;

				.result_wrp_info_text {
					width: 50%;
				}
			}

			.operate_body {
				margin-top: 5rpx;

				.grid-text {
					font-size: 14px;
					font-weight: bold;
					color: #666;
					padding: 10rpx 0;
					box-sizing: border-box;
				}
			}

			.contract_wrapper {
				display: flex;
			}

			.contract_wrapper_item {
				padding: 20rpx;

				.icon {
					display: flex;
					justify-content: center;
				}
			}
		}

	}
</style>